<template>
  <a-layout class="layout">
    <!-- 侧边栏 -->
    <a-layout-sider v-model:collapsed="collapsed" width="240">
      <div class="logo">
        <h1 v-if="!collapsed">笔记事本</h1>
        <h1 v-else>NB</h1>
      </div>
      
      <a-menu theme="dark" mode="inline" :selectedKeys="[selectedKey]">
        <a-menu-item key="dashboard" icon="dashboard">
          <span>仪表盘</span>
        </a-menu-item>
        
        <a-sub-menu key="notebooks" title="笔记本">
          <a-menu-item-group title="我的笔记本">
            <a-menu-item 
              v-for="notebook in notebooks" 
              :key="notebook.id"
              @click="selectNotebook(notebook.id)"
            >
              <span>{{ notebook.title }}</span>
            </a-menu-item>
          </a-menu-item-group>
          <a-menu-item key="new-notebook" @click="createNotebook">
            <span>新建笔记本</span>
          </a-menu-item>
        </a-sub-menu>
        
        <a-menu-item key="tags" icon="tags">
          <span>标签</span>
        </a-menu-item>
        
        <a-menu-item key="trash" icon="trash">
          <span>回收站</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    
    <!-- 主内容区 -->
    <a-layout>
      <!-- 顶部导航 -->
      <a-layout-header class="header">
        <a-icon-button 
          type="primary" 
          shape="circle" 
          icon="menu-unfold"
          @click="toggleCollapsed"
        />
        
        <div class="search-container">
          <a-input-search 
            placeholder="搜索笔记..." 
            :enter-button="true"
            @search="handleSearch"
          />
        </div>
        
        <div class="user-info">
          <a-avatar :src="user.avatar" />
          <span>{{ user.username }}</span>
          <a-dropdown>
            <a class="ant-dropdown-link" href="#">
              <a-icon type="down" />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="profile">
                  <a-icon type="user" /> 个人资料
                </a-menu-item>
                <a-menu-item key="settings">
                  <a-icon type="setting" /> 设置
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="logout" @click="logout">
                  <a-icon type="logout" /> 退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      
      <!-- 内容区 -->
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
      
      <!-- 底部 -->
      <a-layout-footer class="footer">
        笔记事本 ©2025 版权所有
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message, Layout } from 'ant-design-vue';

// 侧边栏折叠状态
const collapsed = ref(false);
// 当前选中的菜单项
const selectedKey = ref('dashboard');
// 用户信息
const user = ref({
  username: '用户',
  avatar: 'https://picsum.photos/200/200'
});
// 笔记本列表
const notebooks = ref([]);

const router = useRouter();

// 切换侧边栏折叠状态
const toggleCollapsed = () => {
  collapsed.value = !collapsed.value;
};

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await fetch('/api/users/me', {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    });
    
    if (!response.ok) {
      throw new Error('获取用户信息失败');
    }
    
    const data = await response.json();
    user.value = data;
  } catch (error) {
    message.error(error.message);
    router.push('/login');
  }
};

// 获取笔记本列表
const fetchNotebooks = async () => {
  try {
    const response = await fetch('/api/notebooks', {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    });
    
    if (!response.ok) {
      throw new Error('获取笔记本列表失败');
    }
    
    const data = await response.json();
    notebooks.value = data;
  } catch (error) {
    message.error(error.message);
  }
};

// 选择笔记本
const selectNotebook = (notebookId) => {
  selectedKey.value = `notebook-${notebookId}`;
  router.push(`/notebooks/${notebookId}`);
};

// 创建笔记本
const createNotebook = () => {
  router.push('/notebooks/new');
};

// 处理搜索
const handleSearch = (value) => {
  router.push({ name: 'Search', query: { q: value } });
};

// 退出登录
const logout = () => {
  localStorage.removeItem('token');
  router.push('/login');
};

// 页面加载时获取用户信息和笔记本列表
onMounted(async () => {
  if (!localStorage.getItem('token')) {
  debugger;
    router.push('/login');
    return;
  }
  
  await fetchUserInfo();
  await fetchNotebooks();
});
</script>

<style scoped>
.layout {
  min-height: 100vh;
}

.logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header {
  background: #fff;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-container {
  width: 300px;
  margin: 0 16px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info span {
  margin: 0 8px;
}

.content {
  padding: 24px;
  min-height: 280px;
}

.footer {
  text-align: center;
}
</style>